<template>
  <!-- 点餐分类部分 -->
    <div class="foodType">
        <template v-for="(item,index) in foodType">
            <div class="foodTypeItem" @click="navigatorToBusinessList(item)">
                <img :src="`src/assets/img/dcfl0${index}.png`">
                <p>{{item.typeName}}</p>
            </div>
        </template>

    </div>
</template>

<script setup>
import {reactive} from "vue";
import router from "../route/route.js";
const foodType = reactive([
        {
            typeName:"美食",
            orderTypeId:1
        },
        {
            typeName:"早餐",
            orderTypeId:2
        },{
            typeName:"汉堡披萨",
            orderTypeId:3
        },{
            typeName:"甜品饮品",
            orderTypeId:4
        },{
            typeName:"速食简餐",
            orderTypeId:5
        },{
            typeName:"地方小吃",
            orderTypeId:6
        },{
            typeName:"米粉面馆",
            orderTypeId:7
        },{
            typeName:"包子粥铺",
            orderTypeId:8
        },{
            typeName:"炸鸡炸串",
            orderTypeId:9
        },{
        typeName:"广式早茶",
        orderTypeId:10
    }
    ])

const navigatorToBusinessList = (orderType)=>{
    router.push({path:`/businessListByOrder/${orderType.orderTypeId}`})
}
</script>

<style scoped>
/****************** 点餐分类部分 ******************/
.foodType{
    width: 100%;
    height: 48vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    /*要使用align-content。10个子元素将自动换行为两行，而且两行作为一个整体垂直居中*/
    align-content: center;
}
.foodType .foodTypeItem{
    display: flex;
    flex-direction: column;

    height: 20vw;
    width: 18vw;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.foodType .foodTypeItem img{
    width: 12vw;
    /*视频讲解时高度设置为12vw，实际上设置为10.3vw更佳*/
    height: 10.3vw;
}
.foodType .foodTypeItem p{
    font-size: 3.2vw;
    color: #666;
}
</style>